```jsx
import * as rating from "@zag-js/rating-group"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"
import { HalfStar, Star } from "./icons"

function Rating() {
  const service = useMachine(rating.machine, { id: createUniqueId() })

  const api = createMemo(() => rating.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <label {...api().getLabelProps()}>Rate:</label>
      <div {...api().getControlProps()}>
        {api().items.map((index) => {
          const state = api().getItemState(index)
          return (
            <span key={index} {...api().getItemProps({ index })}>
              {state.half ? <HalfStar /> : <Star />}
            </span>
          )
        })}
      </div>
      <input {...api().getHiddenInputProps()} />
    </div>
  )
}
```
